<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="标签类型：">
          <el-select v-model="formInline.type" placeholder="请选择">
            <el-option
              v-for="item in typeLs"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称：">
          <el-input
            placeholder="请输入标签名称"
            v-model="formInline.name"
            class="input-with-select"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <!-- <div class="listBox_head">
        <el-button type="primary" @click="getNew">新增</el-button>
        <div class="btnBox">
          <el-upload
            class="upload-demo"
            :action="fileaction"
            :headers="headers"
            :data="fileData"
            :limit="1"
            :on-success="handleFileChange">
            <el-button type="primary">批量导入</el-button>
          </el-upload>
        </div>
      </div> -->
      <ex-table
        ref="table"
        :loading="loading"
        :showPage="false"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:area="{ scope }">
          <dict-tag :options="typeLs" :value="scope.row.source" /> 
        </template>
        <template v-slot:operate="{ scope }">
          <el-button type="primary" @click="setEdit(scope.row)" size="small" >编辑</el-button
          >
        </template>
      </ex-table>
    </div>
    <DetailDialog v-if="detailShow" :id="id"  :visible.sync="detailShow" @success="_handleSuccess"></DetailDialog>
  </div>
</template>

<script>
import {
  merchantTagSettingList
} from "@/api/merchants/merchantLabelSettings";
import handlePageMixin from "@/mixins/handlePageMixin";
import DetailDialog from "./components/merchantLabelSettings/DetailDialog"; 
export default {
    name: 'BeeTokenSystemH5MerchantLabelSettings',
    mixins: [handlePageMixin],
    components: {
      DetailDialog,
    },
    data() {
        return {
           detailShow:false, //编辑标签商户 显示隐藏
           loading: false,
           id:'',
           formInline: {
              name: null,
              type: null,
            },
            typeLs: [],
            tableData: [],
            tableColumn: [
                // { prop: "shopId", slot: true,slotName: "area",label: "标签类型" },
                { prop: "typeDict",label: "标签类型"},
                { prop: "name",label: "标签名称"},
                { prop: "num", label: "标签商家数量" },
                { label: "操作", slot: true,slotName: "operate", width: "180",fixed: "right"},
            ],
        };
    },
    created () {
      this.getDict()
    },
    mounted() {
        
    },

    methods: {
      //获取字典
       async getDict() {
          var dictType = "shenye_merchant_tag_setting_type";
          var res = await this.$getSelectList(dictType)
          this.typeLs = res.result[0].dictList
          this.getList()
        },
        setEdit(item){
          this.id = item.id
          this.detailShow = true
        },
        onSubmit() {
            //查询
            // this.pageOptions.pageNum = 1;
            // this.$refs.table.pageOptions.pageNum = 1;
            this.getList();
        },
        reset() {
          this.formInline.name= ''
          this.formInline.type= ''
            // this.pageOptions.pageNum = 1;
            // this.$refs.table.pageOptions.pageNum = 1;
            this.getList();
        },
        getList() {
            const params = {
              // ...this.pageOptions,
              ...this.formInline,
            };
            this.loading = true;
            merchantTagSettingList(params)
                .then((res) => {
                // const { total, records } = res.result;
                // this.$refs.table.pageOptions.total = total;
                this.tableData = res.result;
                })
                .finally(() => {
                  this.loading = false;
                });
       },
       _handleSuccess() {
          this.getList();
          // this.detailShow = false;
      },
    },
};
</script>

<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  .el-button{
    height: 35px;
  }
  .btnBox{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 20px;
  }
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
</style>